<template>
  <div class="floating-button" @click.stop="() => emits('click')">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  size: {
    type: String,
    default: '60px'
  },
  backgroundColor: {
    type: String,
    default: '#ffd04b'
  },
  color: {
    type: String,
    default: '#1e1e1e'
  }
})

const emits = defineEmits<{
  (e: 'click'): void
}>()
</script>

<style scoped lang="scss">
.floating-button {
  position: absolute;
  right: 30px;
  bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: v-bind(size) !important;
  height: v-bind(size) !important;
  border-radius: 50%;
  color: v-bind(color);
  background-color: v-bind(backgroundColor);
  cursor: pointer;
  box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);

  /** 文字不可选中 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>
